<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		canvas {
			border: 1px solid #ccc;
		}
	</style>
</head>
<body>
<canvas id="" width="600" height="400"></canvas>
<script>
	var myCanvas = document.querySelector('canvas');
	var ctx = myCanvas.getContext('2d');
	
	/* 1.绘制网格 */
	/* 2.网格的大小 */
	var gridSize = 10;
	var canvasHeight = ctx.canvas.height;
	var canvasWidth = ctx.canvas.width;
	// 3.花多少条x轴方向的线 横线的条数 画布高度
    // var canvasHeight = myCanvas.height;
    // var canvasWidth = myCanvas.width;
    // console.log(canvasHeight);
    // console.log(canvasWidth);*/
    // /*console.log(ctx.canvas.width);
    // console.log(ctx.canvas.height);
    var xLineTotal = Math.floor(canvasHeight / gridSize);
    for (var i = 0; i <= xLineTotal; i++) {
        ctx.beginPath();
        ctx.moveTo(0, i * gridSize - 0.5 );
        ctx.lineTo(canvasWidth, i * gridSize - 0.5);
        ctx.strokeStyle = '#eee';
        ctx.stroke();
    }
	// 4.画多少条Y轴方向的线
	var yLineTotal = Math.floor(canvasWidth / gridSize);
	for (var i = 0; i <= yLineTotal; i++) {
	    ctx.beginPath();
	    ctx.moveTo(i*gridSize - 0.5 ,0);
	    ctx.lineTo(i*gridSize - 0.5 ,canvasHeight);
	    ctx.strokeStyle = '#eee';
	    ctx.stroke();
	}
	// 5.遍历的形式去画
</script>
</body>
</html>